<template>
  <div class="help_main">
    <v-header head-title="邻里求助" goBack="true" help-publish="发布" @helpPublish="addHelp"></v-header>
    <publish @getValue="getValue" @getImage="getImage" :holder="holder"></publish>
    <div class="line"></div>
    <ul class="input_row ">
      <li class="border-bottom">
        <span>求助标题：</span>
        <input type="text" placeholder="请输入求助的标题" v-model="helpTitle">
      </li>
      <li>
        <span>电话号码：</span>
        <input type="tel" placeholder="请输入电话号码" v-model="helpPhone" maxlength="11">
      </li>
    </ul>
    <div class="line"></div>
    <div class="choce">
      <div class="choce_title">
        <div class="title_icon">
          <img src="./images/fenlei@2x.png"/>
        </div>
        <div class="title_words">
          <span>分类</span>
        </div>
      </div>
      <div class="select_list">
        <mt-radio
          align="left"
          v-model="value"
          :options="options">
        </mt-radio>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .help_main {
    width: 100%;
    background: #fff;
    padding-top: 40px;
    .line {
      width: 100%;
      height: 10px;
      background: #f2f2f2;
    }
    .input_row {
      width: 100%;
      li {
        height: 45px;
        span {
          font-size: 15px;
          line-height: 45px;
          margin-left: 10px;
        }
        input {
          outline: none;
          border: none;
          color: #777777;
          font-size: 14px;
          /*margin-left: 10px;*/
        }

      }
      li:last-child {
        border-bottom: none;
      }
    }
    .choce {
      width: 100%;
      margin-top: 10px;
      background: #fff;
      .choce_title {
        width: 90%;
        height: 40px;
        margin-left: 5%;
        .title_icon {
          padding-top: 9px;
          float: left;
          img {
            width: 17px;
            height: 20px;
          }
        }
        .title_words {
          padding-left: 7%;
          span {
            font-size: 14px;
            line-height: 44px;
            color: #666;
          }
        }
      }
      .select_list {
        width: 90%;
        margin-left: 5%;
        padding-bottom: 10px;
        .mint-radiolist-label {
          padding: 0;
        }
        .mint-cell-wrapper {
          padding: 0;
        }
        .mint-cell {
          border-bottom: 1px dashed #d7d7d7;
        }
        .mint-cell:last-child {
          border-bottom: none;
        }
        .mint-cell:last-child {
          background-size: 100% 0;
        }
        .mint-cell-wrapper {
          background-size: 120% 0;
        }
        .mint-radio-label {
          color: #777777;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import qs from 'qs'
  import { Toast, Indicator } from 'mint-ui'
  import {
    loadVillageId,
    loadOpenId
  } from '../../common/js/cache.js'
  import commonUrl from '../../common/js/commonUrl.js'
  import publish from '../common/publish.vue'
  export default {
    data () {
      return {
        helpContent: '',
        helpTitle: '',
        helpPhone: '',
        serverIds: [],
        showLoading: false,
        value: '',
        options: [
          {
            label: '疾病突发',
            value: '1'
          },
          {
            label: '寻人',
            value: '2'
          },
          {
            label: '找物',
            value: '3'
          },
          {
            label: '宠物',
            value: '4'
          },
          {
            label: '借东西',
            value: '5'
          },
          {
            label: '搭把手',
            value: '6'
          },
          {
            label: '打听周边消息',
            value: '7'
          }
        ],
        holder: '请输入求助的内容(字数不超过200)'
      }
    },
    computed: {},
    methods: {
      getValue (value) {
        this.helpContent = value
      },
      getImage (image) {
        // this.imagesLrz = image
        this.serverIds = image
      },
      addHelp () {
        setTimeout(function () {
          Indicator.close()
        }, 10000)
        if (!this.helpContent.trim().length || !this.helpContent || !this.helpTitle || !this.helpPhone || !this.serverIds.length || !this.value) {
          Toast({
            message: '请填写完整信息',
            position: 'middle',
            duration: 2000
          })
          return
        }
        // 电话的正则表达式
        if (!(/^1(3|4|5|7|8)\d{9}$/.test(this.helpPhone))) {
          Toast({
            message: '电话号码错误，请正确输入',
            position: 'middle',
            duration: 2000
          })
          return
        }
        Indicator.open({
          text: '发布中...',
          spinnerType: 'fading-circle'
        })
        const url = `${commonUrl.apihost}index.php/home/Neighbor/add`
        const data = {
          content: this.helpContent,
          title: this.helpTitle,
          phone: this.helpPhone,
          serverIds: this.serverIds,
          category: this.value,
          areas_id: loadVillageId(),
          openid: loadOpenId()
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
//          console.log(res)
          if (res.data.code === 200) {
            Indicator.close()
            Toast({
              message: '发布成功',
              position: 'middle',
              duration: 2000
            })
            history.replaceState({}, '', '/Home')
            this.$router.push('/home/SeekHelp')
          }
          if (res.data.code === 400) {
            Indicator.close()
            Toast({
              message: '发布失败',
              position: 'middle',
              duration: 3000
            })
          }
          if (res.data.code === 401) {
            Indicator.close()
            Toast({
              message: '您的发表帖子已经触犯相关法律法规,暂时不能使用发帖和评论功能.',
              position: 'middle',
              duration: 3000
            })
          }
        })
      }
    },
    components: {
      'v-header': headTop,
      publish
    }
  }
</script>
